.bookmark {
	cursor: pointer;
	position: absolute;
	transition: all .5s;
	&.ng-enter {
		opacity: 0;
		transform: translate(0,-20%);
	}
	&.ng-enter-active,&.ng-leave {
		opacity: 1;
		transform: translate(0,0);
	}
	&.ng-leave-active {
		opacity: 0;
		transform: translate(0,200%);
	}
	.icon {
		width: 100%;
		height: 170px;
		line-height: 170px;
		text-align: center;
		font-size: 20px;
		color: white;
		padding: 0 10px;
		div {
			.textNoWrap;
		}
	}
	.favicon {
		width: 16px;
		height: 16px;
	}
	.title {
		font-size: 14px;
	}
	.url {
		color: gray;
		font-size: 10px;
		.textNoWrap;
	}
	&>* {
		position: absolute;
	}
	&:hover {
		text-shadow: 0 0px 1px #bbb;
	}
	.bar>& {
		height: 35px;
		width: 100%;
		.icon {
			display: none;
		}
		.favicon {
			left: 5px;
			top: 10px;
		}
		.title {
			left: 26px;
			top: 9px;
			width: 50%;
			.textNoWrap;
		}
		.url {
			left: calc(~'60% + 26px');
			top: 9px;
			width: calc(~'40% - 26px');
		}
		.button {
			background: orange;
		}
	}
	.tile>& {
		height: 240px;
		width: 250px;
		border: 1px solid gray;
		border-radius: 5px;
		background: white;
		.favicon {
			left: 5px;
			bottom: 10px;
		}
		.title {
			left: 10px;
			right: 10px;
			top: 170px;
			height: 40px;
			overflow: hidden;
			font-weight: bold;
		}
		.url {
			bottom: 5px;
			left: 26px;
			right: 5px;;
			line-height: 24px;
		}
		.button {
			background: white;
		}
	}
	textarea {
		resize: none;
	}
	.editable {
		.edit {
			border: 1px solid dodgerblue;
			background: white;
		}
	}
	.button {
		top: 8px;
		width: 20px;
		height: 20px;
		line-height: 20px;
		text-align: center;
		display: none;
		border-radius: 50%;
		&:not(:hover) {
			color: #666;
		}
	}
	.select {
		left: 4px;
	}
	.edit {
		right: 30px;
	}
	.remove {
		right: 5px;
	}
	&:not(.editing) {
		&:hover {
			.select, .edit, .remove {
				display: block;
			}
		}
		&.selected {
			.select {
				color: black;
				display: block;
			}
		}
	}
	&.dragging {
		opacity: .5;
	}
}
